<template>
	<view>
		<!-- tab栏切换 -->
		<view class="tab_w flex_a">
			<block v-for="item in tabList" :key="item.status">
				<view class="flex1 h80 lh80 border-r4 ft30 tac" :class="activeTab == item.status ? 'b-primary cf' : ''"
					@click="tapTab(item.status)">{{ item.name }}</view>
			</block>
		</view>
		<view class="plr30 pt150">
			<block v-for="item in loadList" :key="item.id">
				<view class="mb30 plr30 pt30 bf border-r1 shadow" @click="routerLink({ path: '/pages/admin/userFault/detail',query: {id:item.id} })">
					<view class="pb20 bdb">
						<view class="flex h60">
							<text
								class="flex1">设备类型：{{item.device_type==1?'换电柜':item.device_type==2?'租车':item.device_type==3?'充电柜':''}}</text>
							<view class="warnC" v-if="item.status==1"></view>
						</view>
						<view class="h50">编号：{{item.device_no}}</view>
						<view class="h50">报障时间：{{item.stime | formatTime}}</view>
            <view class="h50">报障原因：{{item.fault_reason || ''}}</view>
						<view class="flex">
							<text class="whn">报障描述：</text>
							<text class="flex1">{{item.fault_content}}</text>
						</view>
					</view>
					<view class="flex_a jce h80">
						<view class="flex_a"
							>
							<text class="pr10 c9">设备详情</text>
							<u-icon name="arrow-right" color="#999" size="26"></u-icon>
						</view>
					</view>
				</view>
			</block>
			<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0">
				<view class="c9 pt20">暂无此类报障信息</view>
			</view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import loadMore from '@/mixins/loadMore'
	import {
		faultList
	} from '@/api/admin'
	export default {
		name: 'deviceList',
		mixins: [loadMore],
		data() {
			return {
				showTime: false,
				activeTab: 1, // 1 未处理 2 已处理
				tabList: [{
					name: '未处理',
					status: 1
				}, {
					name: '已处理',
					status: 2
				}] // 头部tab栏
			}
		},
		onLoad(e) {},
		onShow() {
      this.loadData()
    },
		onHide() {},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin
			}
		},
		methods: {
			// 点击tab栏
			tapTab(status) {
				this.markerInfoShow = false
				this.activeTab = status
				this.page = 1
				this.loadData()
			},
			async loadData() {
				const res = await faultList({
					pageNum: this.page,
					pageSize: this.limit,
					status: this.activeTab,

				})
				this.showTime = true
				this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]

				this.pageLength = res.rows.length
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
			},

		}
	}
</script>

<style scoped lang="scss">
	.tab_w {
		position: fixed;
		top: 16upx;
		left: 30upx;
		width: 690upx;
		height: 100upx;
		padding: 10upx 14upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50upx;
		overflow: hidden;
		box-shadow: 0px 4px 18px 0px rgba(50, 130, 255, 0.24);
	}

	.warnC {
		width: 16upx;
		height: 16upx;
		background-color: #FF6600;
		border-radius: 50%;
	}
</style>
